<template>
  <div class="evaluatePage">
    <div v-if="showFather">
      <serch :formInline="formInline" :options='options' v-on:serchFormInline="serchFormInline" :name='name' :title='title'></serch>
      <div class="checkTable">
        <div class="ct_title">
          评价列表
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            prop="index"
            label="序号"
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="programName"
            label="模型名称"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="detectionTime"
            label="模型类型"
            min-width="80">
            <template slot-scope="scope">
                <div  v-if="scope.row.programType == 1">
                    <div>塑造程序</div>
                </div>
                <div  v-if="scope.row.programType == 2">
                    <div>取证程序</div>
                </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="averageScore"
            label="平均分"
            show-overflow-tooltip
            min-width="80"
            v-if="id == 1">
          </el-table-column>
          <el-table-column
            prop="personalScore"
            label="分数"
            show-overflow-tooltip
            min-width="80">
          </el-table-column>
          
          <el-table-column
            label="操作"
            fixed="right"
            min-width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.id">
                <el-button 
                  type="text"
                  @click="handleSee(scope.$index, scope.row)">重新评价</el-button>
              </div>
              <div v-if="!scope.row.id">
                <el-button 
                  type="text"
                  @click="handleSee(scope.$index, scope.row)">评价</el-button>
              </div>
              
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>


    <div class="previewShade" v-show="previewShade" @click="closePreviewShade"> 
      <i class="el-icon-close close" @click="closePreviewShade"></i>
    </div>
    <div class="previewShadeMain" v-show="previewShade">
      <video :src="previewSrc" v-if="type == 0" class="preview" controls/>
      <audio :src="previewSrc" alt="" v-else-if="type == 1" class="preview" controls/>
      <img :src="previewSrc" alt="" v-if="type == 2" class="preview" />
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import serch from '../../components/serch.vue'
import { getProgramEvaluationList ,deleteForensicByIds ,getProgramList ,execForensic ,forensicGetStatus, getMouldResultInfos ,forensicProgramEvaluation} from '../../api/index'
export default {
  components:{
    serch
  },
  data(){
    return{
      name:'模型名称',
      title:'模型类型',
      token:'',
      id:'',
      //
      pageNum: 1,
      pageSize: 10,
      total:0,

      showFather:true,
      formInline: {
        programName: '',
        programType: ''
      },
      tableData: [],
      options: [{
        value: '1',
        label: '塑造程序'
      }, {
        value: '2',
        label: '取证程序'
      },],
      currentPage:1,
      multipleSelection:[],
      previewShade:false,
      previewSrc:'',
      type:0,
    }
  },
  watch:{
    $route(){
        console.log(this.$route.path)
      if(this.$route.path == '/home/evaluate'){
        this.showFather = true
      }else if(this.$route.path == '/home/evaluate/evaluateadd'){
        this.showFather = false
      }
      this.init()
      this.token = sessionStorage.getItem('token')
    }
  },
  created(){
    this.id = sessionStorage.getItem('userId')
    console.log(this.id)
    if(this.$route.path == '/home/evidence'){
      this.showFather = true
    }else if(this.$route.path == '/home/evaluate/evaluateadd'){
      this.showFather = false
    }
  },
  mounted(){
    this.init()
    
    // this.initOption()
  },
  methods:{
    init(){
      let pageNum = this.pageNum
      let pageSize = this.pageSize
      let programName = this.formInline.programName
      let programType = this.formInline.programType
      let params = { pageNum, pageSize, programName, programType}
      getProgramEvaluationList(params).then(res=>{
        console.log(res)
        if(res.data.message == 'success'){
          let re = res.data.data
          this.tableData = re.object
          this.tableData.forEach((el,index)=>{
            el.index = index + 1
          })
          this.total = re.count
        }
      })
    },
    // initOption(){
    //   let programName = ""
    //   let programType = 2
    //   let status = 1
    //   let params = {programName, programType, status}
    //   getProgramAll(params).then(res=>{
    //     let re = res.data.data
        
    //     re.object.forEach((el,index)=>{
    //       this.options.push({
    //         value: el.id,
    //         label: el.programName
    //       })
    //     })
        
    //   })
    // },
    serchFormInline(e) {
      this.pageNum = 1
      this.formInline.programName = e.fileName
      this.formInline.programType = e.mediaType
      this.init()
    },
    handleSelectionChange(e){
      this.multipleSelection = e
    },
    
    handleEdit(index,item){
    },
    handleSee(index,item){
        
        console.log(item)
        if(item.programType == 1){
            let programId = item.programId
            let params = {programId}
            getMouldResultInfos(params).then(res=>{
                console.log(res.data)
                if(!res.data.data){
                    this.$message.error(res.data.message);
                }else{
                    this.$router.push({
                        path: '/home/evaluate/evaluateadd',
                        query: {
                            id:item.id,
                            programId : item.programId,
                            programName: item.programName,
                            programType: item.programType,
                        }
                    })
                }
            })
            
        }else if(item.programType == 2){
            let id = item.id
            let programId = item.programId
            let programName = item.programName
            let params = {id,programId,programName}
            forensicProgramEvaluation(params).then(res=>{
                console.log(res)
                if(res.data.status == 0){
                  this.$message({
                    message: '评价中',
                    type: 'success'
                  });
                }else{
                  this.$message.error(res.data.message)
                }
            })
        }
      
    },
    handExecMould(index,el){
      let id = el.id
      let params = { id }
      execForensic(params).then(res=>{
        if(res.data.message == "success"){
          this.init()
          // 获取状态
          forensicGetStatus(params).then(re=>{
            if(re.data.message == "success"){
              this.init()
            }else{
              this.$message.error(re.data.message)
            }
          })
        }else{
          this.$message.error(res.data.message)
        }
      })
    },
    
    handleSizeChange(val) {
      this.pageNum = 1
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.init()
    },
    showPreview(index,res){
      this.previewShade = true

      this.previewSrc = res.filePathParameters1
      let name = res.filePathParameters1.split('.')
      

      if(name[name.length - 1] == 'mp4'){
        this.type = 0
      }else if(name[name.length - 1] == 'wav'){
        this.type = 1
      }else if(name[name.length - 1] == 'jpg' || name[name.length - 1] == 'jpeg' || name[name.length - 1] == 'png'){
        this.type = 2
      }
    },
    closePreviewShade(){
      this.previewShade = false
      this.previewSrc = ''
    }
  }
}
</script>

<style lang='less' scoped>
.evaluatePage{
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  background-color: #1D1F2C;
  height: calc(100vh - 108px);
  overflow: auto;
  .checkTable{
    background-color: #282C41;
    color: #fff;
    padding: 5px 15px;
    margin-top: 20px;
    border-left: 4px solid #04D4FF;
    background-image: url('../../assets/images/mouId/liang.png');
    background-repeat: no-repeat;
    background-size: contain ;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ct_title{
      font-size: 20px;
    }
    .ct_button{
      .newAdd{
        color: #63E9FF;
        border: 1px solid #00CEF0;
        background-color: rgba(49, 203, 236, 0.1400);
        border-radius: 2px;
      }
      .delate{
        background-color: transparent;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 2px;
      }
    }
    
  }
  .tableBox{
    padding: 0 10px;
    background-color: #282C41;
    /deep/.el-table .el-table__cell {
      padding: 8px 0;
    }
    /deep/.el-table th.el-table__cell {
        background: #4F5367!important;
        color: #fff!important;
    }
    /deep/.el-table tr {
        background-color: #3C4052;
        color: #fff;
    }
    /deep/.el-table th.el-table__cell>.cell {
      border-right: 1px solid #fff;
      padding-left: 14px!important;
    }
    /deep/.el-table th.el-table__cell:last-child >.cell {
      border-right: 0;
    }
    // /deep/.el-table th.el-table__cell:first-child >.cell {
    //   border-right: 0;
    // }
    /deep/.el-table_body tr.hover_row>td.el-table_cell{
      background-color: red!important;
    }
    /deep/.el-button--text {
      color: #3FC1FF;
    }
    /deep/.el-table__body-wrapper {
      background-color: #3C4052;
    }
  }
  tbody tr:hover>td,/deep/ tbody tr.hover-row>td { background-color: rgba(63,193,255,0.2000) }
  .block{
    padding: 20px 0;
    background-color: #282C41;
    /deep/.el-pagination{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 15px;
    }
    /deep/.el-pagination__total {
      color: #fff;
    }
    /deep/.el-input__inner {
      color: #fff;
      background-color: transparent;
    }
    /deep/.el-pagination.is-background .el-pager li {
      margin: 0 5px;
      background-color: transparent;
      color: #fff;
      min-width: 30px;
      border-radius: 2px;
      border: 1px solid #fff;
    }

    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: rgba(5, 190, 223, 0.14);
      color: #00BEDF;
      border: 1px solid #00BEDF;
    }
    /deep/.btn-prev {
       background-color: transparent;
      color: #FFF;
      border: 1px solid #fff;
    }
    /deep/.btn-next{
      background-color: transparent;
      color: #FFF;
      border: 1px solid #fff;
    }
    /deep/.el-pagination__jump {
      margin-left: 24px;
      font-weight: 400;
      color: #fff;
    }
    
  }
 .previewShade{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    
    .close{
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 26px;
      background-color: #FFF;
      border-radius: 50%;
    }
  }

  .previewShadeMain{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
    z-index: 100;
    .preview{
      
      max-width: 800px;
      max-height: 500px;
    }
  }
}
</style>